@{
    ViewBag.CurrentPage = WebApp.Common.PageSetting.FolderNewPageSetting;
    var sectionId = (Request.IsAjaxRequest() ? "Ajax" : "View") + "_Folder_Add";
}

@section Scripts{
    <script type="text/javascript">
        require(['Folder/add'], function (api) {
            $(function () { api.exec('@sectionId'); });
        });

        $('#accountPicker').click(function () {
            $.publish('showPicker', ['Accounts', '/account']);
        });
    </script>
}

<div class="container" data-bind="stopbinding: true">
    <section id="@sectionId">
        <div class="row ">
            <div class="col-xs-12 col-sm-12 col-md-6">
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="photo">Photo</label>
                            <div class="fileDragHolder">
                                <canvas id="imgCanvas" width="150" height="187"></canvas>
                                <div>
                                    <a id="photo" href="#" data-bind="click: selectPhoto">Select File</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="name">Name</label>
                            <input type="text" id="name" class="form-control" data-bind="value: name" placeholder="Name" required />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="tags">Tags</label>
                            <input id="tags" class="form-control" data-bind="value: tags" required />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="account">Account</label>
                            <div class="input-group input-group-lg">
                                <input class="form-control" data-bind="value: referenceName" disabled="disabled" required />
                                <span id="account" class="input-group-btn">
                                    <button id="accountPicker" type='button' class='btn btn-primary'>
                                        <i class='icon icon-plus'></i>
                                    </button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="description">Description</label>
                            <textarea id="description" class="form-control" rows="3" data-bind="value: description" placeholder="Description"> </textarea>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-3"></div>
                    <div class="col-sm-5 col-md-8">
                        <button class="btn btn-primary" data-bind="click:save">Submit</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-primary" data-bind="click: cancel">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>